<template>
	<view class="box">
		<u-empty    v-if="list.length==0&&status!='loadmore'"   text="无完成单"    icon="https://cdn.uviewui.com/uview/empty/history.png">
		</u-empty>
		<view v-else  class="content2" v-for="(item, index) in list" @click="navigateTo(item)">
			<u-row customStyle="margin-bottom:0px">
			    <u-col span="6">
			       <view class="demo-left" >
			       	<span >完: {{utils.dateFormat(item.completeTime)}} </span><!-- <span style="margin-left: 10px;">11km </span> -->
			       </view>
			    </u-col>
				<u-col span="6">
					<view >
						<view class="typeName">
							{{item.serveName}}
						</view>
					</view>
				</u-col>
			   <!-- <u-col span="3">
			        <view class="demo-right" >
			        	
						<view v-if="item.orderStatus==0&&item.finalPrice!=0" style="color: #00ac4e;">
							待入账<span> {{(item.totalPrice/100).toFixed(2)}}元</span>
						</view>
						<view v-else>
							入账<span> {{(item.totalPrice/100).toFixed(2)}}元</span>
						</view>
			        </view>
					
					<uview-ui>
						<u-divider></u-divider>
						<span></span>
					</uview-ui>
			    </u-col> -->
			</u-row>
			<u-steps  direction="column" dot activeColor="#ffd02b" inactiveColor="#00ac4e" style="margin-top: 10px;">
				<u-steps-item :title="'('+item.userName+')'+item.userAddress" :desc="item.address">
				</u-steps-item>
			</u-steps>  
		    <view style="height: 20px;" v-if="item.orderStatus==10"> 
			  <span style="float: right;color: red;"  >不通过</span>
			  
			</view>
		</view>	
		<u-loadmore :status="status" v-if="list.length!=0"/>
	</view>
</template>

<script>
	import uEmpty from "@/pagesB/uview-ui/components/u-empty/u-empty";
	import uRow from "@/pagesB/uview-ui/components/u-row/u-row";
	import uCol from "@/pagesB/uview-ui/components/u-col/u-col";
	import uSteps from "@/pagesB/uview-ui/components/u-steps/u-steps";
	import uDivider from "@/pagesB/uview-ui/components/u-divider/u-divider";
	import uLoadmore from "@/pagesB/uview-ui/components/u-loadmore/u-loadmore";
	import {
		mapState
	} from 'vuex'; 
	export default {
		components: {
		    uEmpty,uRow,uCol,uSteps,uLoadmore,uDivider
		},
		data() {
			return {
				status: 'loadmore',//上滑加载函数
				technicianlatitude:"",
				technicianlongitude:"",
				list:[],
				pageVO:{
				},
				details:"/pagesB/serviceList/details",
				mapid:{
					latitude:"25.267435438368057",
					longitude:"110.33772976345486",
				},
				content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
								苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
								无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
				shadowStyle: {
					    backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					    paddingTop: "30px",
					    marginTop: "-30px", 
				},				
				datas:[
					{
						value1:"2023-11-11 15:20-16:00",
						value2:"66",
						value3:"桂林高新万达广场",
						value4:"0km",
						latitude:"25.267507",
						longitude:"110.337638",
					},
					{
						value1:"2023-11-11 15:20",
						value2:"66",
						value3:"桂林市政府",
						value4:"0km",
						latitude:"25.235661",
						longitude:"110.1799459",
					}
				],
				
			}
		},
		computed:{
			//获取是否登录
			...mapState(['hasLogin','userInfo']) 
		},
		mounted() {
			
			
		},
		onLoad(options) {
			//获取登陆id
			this.pageVO.technicianId=this.userInfo.id
			//接收
			//console.log("//接收："+JSON.stringify(options))
			if ('params' in options) {
			    let row = JSON.parse(decodeURIComponent(options.params));
			    console.log(JSON.stringify(row))
				this.pageVO={
					userPhone:row.contactsPhone,
					userName:row.elderlyName,
					pageNo: 1,
					pageSize: 50,
					orderStatus:"4,9",
					technicianId:row.technicianId,
					projectId:row.projectId,
					
				}
				this.showPage();
			}else{
				this.status = 'nomore';
			}
		},
		methods: {
			//获取数据
			showPage(){
				this.pageVO.technicianId=this.userInfo.id
				this.request.getRequest(this.http.httpsLian.homemakingOrder,this.pageVO, true)
				.then(res => { 
					console.log("获取数据：",res)
					if(res.code!=0 )return 
					if(res.data.list.length==0) {
					    this.status = 'nomore';
					    return
					}
					if(res.data.list.length<this.pageVO.pageSize) {
					    this.status = 'nomore';
					}
					if (this.pageVO.pageNo!= 1) {
						this.list = this.list.concat(res.data.list)
					} else {
						this.list=res.data.list
					} 
				}).catch(res => {
					//uni.$u.toast(res)
				})
			},
			//唤醒手机拨号
			getPhoneNumber(user_phone){
				uni.makePhoneCall({
				 	phoneNumber:user_phone,
				 	 success(res) {
				 	 	console.log(res,'拨打成功')
				 	 }
				})
			},
			//上拉事件触发
			onReachBottom(){
				console.log('上拉事件触发'); 
				this.pageVO.pageNo+=1
				this.status = 'loading';
				this.showPage(true)
				//this.$emit('onReachBottomZ')
				
				// 出储存显示字符串：2022-10-18 14:00-15:00
				//排序字段：2022-10-18 14:00
			},
			// 页面下拉时触发，与 onLoad 等生命周期函数平级
			onPullDownRefresh() {
				console.log('页面下拉时触发');
				this.status = 'loadmore';
				//回复默认值
				this.list=[]
				this.pageVO.pageNo=1
				this.pageVO.pageSize=20
				this.showPage(true)
			    setTimeout(() => {
					// 操作完成时，必须结束下拉刷新，否则一直会有 loading 标志
					uni.stopPullDownRefresh();
				}, 1000);
			},
			navigateTo(itme){
				uni.navigateTo({
				   url: "/pagesB/serviceList/details?params="+encodeURIComponent(JSON.stringify({
					   technicianId:itme.technicianId,
					   orderNo:itme.orderNo,
					   receiveStatus:4
					   }))
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.box{
	//padding: 10px;
}	
.content2{
	background-color: white;
	padding: 8px ;
	margin-bottom: 10px;
	border-radius: 4px;
	.demo-right {
		text-align: right;
		span{
			color: red;
		}
		font-size: 22rpx !important;
	}
	.demo-left{
		color: $uni-text-color-placeholder;
	}
	.demo-left,.demo-right{
		font-size: 16px;
	}
	

	
}
.typeName{
	border-radius: 2px;
	background-color: #fefefe;
	font-size: 25rpx;
	padding: 7rpx;
	//color:$Main-green-color;
	display: inline-block;
	position: relative;
	
}


</style>
